<template>
  <div class="ProdcutDetail">
        <index-header></index-header>
        <!-- <product-swiper></product-swiper> -->
        <div class="swiper">
            <swiper :options="swiperOption">
               <!-- slides -->
                <swiper-slide v-for="item of list" :key="item.id">
                <div>
                    <img class="swiper-img" :src="item.img_url.url" alt="">
                </div>
                </swiper-slide>

                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
        <div class="word">
            <h1 class="title">
                {{this.data.name}}
                <span class="right">{{this.data.stock}}</span>
            </h1>
            <p class="word-center">{{this.data.first_title}}</p>
            <p class="price">商品价格：保证金 <span class="price-center">{{this.data.price}}元</span></p>
            <p class="tedian">产品特点： <span>{{this.data.second_title}}</span></p>
            <div class="line"><img src="@/assets/product/line.png" alt=""></div>
        </div>
        <div class="grey"></div>
        <div class="form">
            <input class="name" type="text" placeholder="请输入您的姓名" v-model="this.name">
            <input type="text" placeholder="请输入您的电话" v-model="this.phone">
            <div class="submit" @click="sendForm()"><img src="@/assets/product/btn2.png" alt=""></div>
        </div>
        <div class="grey"></div>
        <div class="tab">
            <div class="tab-item" @click="move(1)">商品详情</div>
            <div class="tab-item" @click="move(3)">细节配件</div>
            <div class="tab-item" @click="move(5)">品质保障</div>
            <div class="tab-item" @click="move(6)">服务流程</div>
        </div>
        <div class="summary" v-html="this.data.summary"></div>
        
             
        <index-footer></index-footer>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import IndexHeader from './../Index/components/Header'
import ProductSwiper from './components/Swiper'

import IndexFooter from './../Index/components/Footer'
export default {
    name: 'ProdductDetail',
    components:{
        IndexHeader,
        ProductSwiper,
        IndexFooter,
    },
    data () {
        return {
            name:'',
            phone:'',
            message:'',
            description:'',
            local:'',
            swiperOption: {
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    loop:true,
                    autoplay:3000,
                    autoplayDisableOnInteraction: false
            },
            list:[],
            data:{}
            
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
      this.getDetail()
    },
      watch: {
      '$route' (to, from) {
          // console.log("当前路由路径",this.$route.path);
          this.getDetail()
      }
    },
    methods:{
       getDetail(){
           
            axios.get(this.baseUrl+'product/'+this.$route.params.id
                )
        .then(this.getDetailSucc)
        },
        getDetailSucc(response){
          console.log(response)
          this.list = response.data.imgs
          this.data = response.data
        },
        sendForm (){
            this.description = "产品页"+this.data.name
            this.message = "产品页"+this.data.name
            this.local = "产品页"+this.data.name
            axios.get(this.baseUrl+'cms/joinAdd',
            {
                params:{
                    username:this.name,
                    phone:this.phone,
                    message:this.message,
                    description:this.description,
                    local:this.local
                }
            })
            .then(this.sendSucc)
        },
        sendSucc(response){
               console.log(response)
               console.log(response.data.errno)
               const errno = response.data.errno
            const h = this.$createElement;
            if(errno===0){

                this.toastSuccess()
               

            }else if(errno===1){
                
                this.toastError()
            }
        },
        toastSuccess() {
            this.$dialog.toast({
                mes: '报名成功',
                timeout: 1500,
                icon: 'success'
            });
        },
        toastError() {
            this.$dialog.toast({
                mes: '该手机号已报名！',
                timeout: 1500,
                icon: 'error',
                callback: () => {
                    this.$dialog.alert({mes: '请重新填写！'});
                }
            });
        },
        move(index){
           $('html,body').animate({scrollTop:1000*(index+1)+'px'},500)
       }

    }
}
</script>



<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
.ProdcutDetail 
    background white
    padding-bottom 3rem
img 
    width 100%
.swiper 
    margin 0.2rem 
    height 5rem
    // background red
    overflow hidden
.swiper-container 
    height 5rem
.word 
    margin 0 0.2rem
.title 
    font-size 0.32rem 
    margin-bottom 0.2rem
.right 
    float right
    color #b3b3b3
    padding-left 0.5rem
    background url('~@/assets/productlist/lick.png') no-repeat left center
.word-center 
    font-size 0.24rem
    color #333333
    margin-bottom 0.3rem
.price 
    font-size 0.24rem
    margin-bottom 0.3rem
.price-center 
    font-size 0.48rem
    color #ef0000
.tedian>span 
    color #ef0000
.tedian 
    margin-bottom 0.3rem
.grey 
    width 100%
    height 0.2rem
    background #f2f2f2
.form 
    overflow hidden
    width 100% 
    height 4.05rem 
    background url('~@/assets/product/form.png') no-repeat center center/contain
.form>input,.form>.submit
    width 6.4rem 
    display block
    height 0.6rem 
    margin 0.1rem auto 
   
.form>input
    text-indent 0.2rem
    border 1px solid #a0a0a0
.form>.name 
    margin-top 1.6rem
.submit 
    border none 
.tab    
    overflow hidden
    width 100%
.tab-item 
    width 25%
    float left
    text-align center
    height 0.7rem
    line-height 0.7rem
    font-size 0.24rem
    color black
.tab-item:hover 
    color white 
    background url('~@/assets/product/tab_bg.png') no-repeat center center/cover
</style>
